<template>
  <el-menu
    :default-active="defaultActive"
    class="el-menu-vertical-demo"
    background-color="#1d2d36"
    :collapse-transition="false"
    :unique-opened="true"
    text-color="#fff"
    active-text-color="#409eff"
    router
    :collapse="isCollapse"
  >
    <template v-for="(item, index) in routes">
      <el-menu-item v-if="!item.children" :index="item.path" :key="index">
        <i :class="`iconfont ${item.meta.icon}`"></i>
        <span slot="title">{{ item.meta.title }}</span>
      </el-menu-item>
      <el-submenu :index="item.path" :key="item.path" v-if="item.children">
        <template slot="title">
          <i :class="`iconfont ${item.meta.icon}`"></i>
          <span>{{ item.meta.title }}</span>
        </template>
        <el-menu-item :index="v.path" v-for="(v, i) in item.children" :key="i">
          <i :class="`iconfont ${v.meta.icon}`"></i>
          <span slot="title">{{ v.meta.title }}</span>
        </el-menu-item>
      </el-submenu>
    </template>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      defaultActive: "/", // 默认打开
    };
  },
  computed: {
    routes() {
      const routes = this.$router.options.routes[1].children;
      return routes;
    },
  },
  methods: {},
};
</script>

<style lang="scss">
.el-menu {
  border: none;
}
.el-menu-item {
  i {
    font-size: 22px;
    margin-right: 20px;
  }
}
.el-submenu__title {
  i {
    font-size: 22px;
    margin-right: 20px;
  }
}
</style>